<script setup lang="ts">
import { ref, onMounted } from 'vue'
import AppHeader from './pages/layout/AppHeader.vue'
import AppFooter from './pages/layout/AppFooter.vue'
import LoginModal from './pages/auth/LoginModal.vue'
import RegisterModal from './pages/auth/RegisterModal.vue'
import { useAuthStore } from './base/stores/auth'

const authStore = useAuthStore()

// Show login/register modal states
const showLoginModal = ref(false)
const showRegisterModal = ref(false)

// Open modal functions - will be passed to header component
const openLoginModal = () => {
  showLoginModal.value = true
  showRegisterModal.value = false
}

const openRegisterModal = () => {
  showRegisterModal.value = true
  showLoginModal.value = false
}

// Close modal functions
const closeLoginModal = () => {
  showLoginModal.value = false
}

const closeRegisterModal = () => {
  showRegisterModal.value = false
}

// Switch between login and register
const switchToRegister = () => {
  showLoginModal.value = false
  showRegisterModal.value = true
}

const switchToLogin = () => {
  showRegisterModal.value = false
  showLoginModal.value = true
}

onMounted(() => {
  // Check for existing auth token on app load
  authStore.checkAuth()
})
</script>

<template>
  <div class="app-container">
    <!-- Header -->
    <AppHeader 
      @openLogin="openLoginModal" 
      @openRegister="openRegisterModal" 
    />
    
    <!-- Main Content -->
    <main class="main-content">
      <router-view />
    </main>
    
    <!-- Footer -->
    <AppFooter />
    
    <!-- Auth Modals -->
    <LoginModal 
      v-if="showLoginModal" 
      @close="closeLoginModal" 
      @switchToRegister="switchToRegister" 
    />
    
    <RegisterModal 
      v-if="showRegisterModal" 
      @close="closeRegisterModal" 
      @switchToLogin="switchToLogin" 
    />
  </div>
</template>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
}
</style>